﻿@{
    ViewBag.Title = "知识分类管理 - " + ViewBag.DomainTitle;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<form class="layui-form query-form ptop15" id="queryToolBar">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <span class="layui-btn layui-btn-warm layui-btn-sm" onclick="javascript: { newClassify(); }">新增</span>
        </div>
    </div>
</form>

<table class="layui-table" lay-filter="dataTable" lay-data="{id:'dataTable',height:'full',method:'post',cellMinWidth:120,page:false,limit:20,url:'/Classify/AjaxData'}">
    <thead>
        <tr>
            <th lay-data="{field:'ID', fixed: 'left', width: 80}">ID</th>
            <th lay-data="{field:'CreateTime'}">创建时间</th>
            <th lay-data="{field:'Types'}">分类类型</th>
            <th lay-data="{field:'Name', edit: 'text'}">名称 E</th>
            <th lay-data="{field:'Remark', edit: 'textarea'}">备注 E</th>
            <th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#tmpToolBar'}">操作</th>
        </tr>
    </thead>
</table>

<script type="text/html" id="tmpToolBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>


<div id="classifyInfo">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this" id="tabIndex">状态信息</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form query-form" id="dataForm">
                    <input type="text" id="ID" name="ID" value="" class="layui-hide" />
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="Name" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-inline">
                                <select name="Types">
                                    @foreach (var item in Enum.GetValues(typeof(QunProject.Model.EnumHelper.ClassifyType)))
                                    {
                                        <option value="@((int)item)">@item.ToString()</option>
                                    }
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-inline">
                                <textarea name="Remark" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <span class="layui-btn layui-btn-sm" onclick="javascript: { submitData(); }">保存</span>
                            <span class="layui-btn layui-btn-warm layui-btn-sm" onclick="javascript: { eject.close(); }">关闭</span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@Html.Partial("~/Views/Shared/_Script.cshtml")

<script>
    var table = layui.table, form = layui.form;
    var eject = new Eject();
    eject.init({
        elm: '#classifyInfo',
        width: '400px'
    });
    // 监听单元格编辑
    table.on('edit(dataTable)', function (obj) {
        var value = obj.value //得到修改后的值
            , data = obj.data //得到所在行所有键值
            , field = obj.field; //得到字段
        if (field === 'Name')
            data.Name = value;
        if (field === 'Remark')
            data.Remark = value;
        editModel(data);
    });
    // 监听工具条
    table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象
        if (layEvent === 'edit') {
            openEdit(data);
        }
    });
    // 刷新table
    function tableReload() {
        var paras = $('#queryToolBar').getForm();
        table.reload('dataTable', {
            where: paras
            , page: false
        });
    };
    // 新知识分类
    function newClassify() {
        var data = { ID: 0, Name: '', Types: '@((int)QunProject.Model.EnumHelper.ClassifyType.普通分类)', Remark: '' };
        openEdit(data);
    };
    // 打开编辑界面
    function openEdit(data) {
        $('#dataForm').setForm(data);
        form.render();
        eject.open();
    };
    // 保存数据
    function submitData() {
        var data = $('#dataForm').getForm();
        editModel(data,true);
    };
    // 提交修改
    function editModel(data,reloadTable) {
        $.post('/Classify/AjaxEdit', data, function (result) {
            layer.msg(result.msg);
            if (reloadTable) {
                tableReload();
                eject.close();
            }
        });
    };
</script>